<script setup>
import { onMounted, ref, computed, reactive } from 'vue';
import {
    reqLeaveDetail,
    reqPassLeaveNote,
    reqImgInNote
} from '@/api/teacher/record/leave';
import { useRouter, useRoute } from 'vue-router';
import { stateNumber } from '@/utils/getStateNumber.js';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { showFailToast, showToast, showNotify } from 'vant';

const teacherStore = useTeacherStore();

const route = useRoute();

const router = useRouter();

// 是否展示加载
const loading = ref(true);

// 是否展示form
const isShowForm = ref(false);

// 是否展示通过
const isShowPassImg = ref(false);

// 放行条信息
const leaveDetail = ref({});

// 审批内容
const teacherReview = ref('');

const getDetail = async () => {
    try {
        const result = await reqLeaveDetail(route.query.id);

        if (result.status == 200) {
            leaveDetail.value = result.data;

            const state = result.data.state;
            const roleNums = teacherStore.roleNums;

            result.data.imageIds.forEach(id => getImg(id));

            if (state == 17 && roleNums.includes(13)) {
                isShowForm.value = true;
            } else if (
                state == 5 ||
                state == 0 ||
                (state == 11 && roleNums.includes(6))
            ) {
                isShowForm.value = true;
            } else if (state == 23 && roleNums.includes(19)) {
                isShowForm.value = true;
            } else if (state == 2 && roleNums.includes(3)) {
                isShowForm.value = true;
            } else if (state == 0 && roleNums.includes(6)) {
                isShowForm.value = true;
            }

            if (
                state == 4 ||
                state == 9 ||
                state == 16 ||
                state == 22 ||
                state == 28
            ) {
                //假条已通过
                isShowPassImg.value = true;
            }

            for (const key in leaveDetail.value.beforeApprover[2]) {
                review1 = `${key}(${leaveDetail.value.beforeApprover[2][key]})`;
            }
            for (const key in leaveDetail.value.beforeApprover[6]) {
                review2 = `${key}(${leaveDetail.value.beforeApprover[6][key]})`;
            }
            for (const key in leaveDetail.value.beforeApprover[13]) {
                review3 = `${key}(${leaveDetail.value.beforeApprover[13][key]})`;
            }
            for (const key in leaveDetail.value.beforeApprover[19]) {
                review4 = `${key}(${leaveDetail.value.beforeApprover[19][key]})`;
            }

            if (!roleNums.includes(6)) {
                leaveDetail.value.leaveCount = 0;
            }

            loading.value = false;
        } else {
            throw new Error(result.statusText || '获取申请信息失败');
        }
    } catch (e) {
        showFailToast(e.message);
        router.push({ name: 'home-teacher' });
    }
};

onMounted(() => {
    getDetail();
});

// 请假原因
const leaveType = computed(() => {
    const dType = leaveDetail.value.detailedType;

    switch (dType) {
        case 1:
            return '事假（因公请假）';
        case 2:
            return '病假';
        case 3:
            return '补假';
        case 6:
            return '事假（因私请假）';
        default:
            return '请假';
    }
});


const getImg = async id => {
    const response = await reqImgInNote(id);
    imgList.push(URL.createObjectURL(response));
};

let review1 = '';
let review2 = '';
let review3 = '';
let review4 = '';

const imgList = reactive([]);

// 通过
const pass = async () => {
    try {
        const data = {};

        data.comment = teacherReview.value == 0 ? '同意' : teacherReview.value;

        const roleNum = teacherStore.roleNums;
        const state = leaveDetail.value.state;

        if (roleNum.includes(13) && state == 17) {
            data.state = 22;
        } else if (
            state == 5 ||
            state == 0 ||
            (state == 11 && roleNum.includes(6))
        ) {
            data.state = 16;
        } else if (roleNum.includes(19)) {
            data.state = 28;
        } else if (roleNum.includes(3)) {
            data.state = 9;
        }

        data.id = route.query.id;

        const result = await reqPassLeaveNote(data);

        if (result.status == 200) {
            showNotify({
                message:
                    '您已审核通过该条信息，审核结果会尽快发送回审核人, 5秒钟之后跳转到主页',
                type: 'success',
                duration: 5000
            });
        } else {
            throw new Error('发送失败, 5秒钟之后跳转到主页');
        }

        const timer = setTimeout(() => {
            router.push({ name: 'home-teacher' });
            clearTimeout(timer);
        }, 5000);
    } catch (e) {
        showFailToast(e.message);
    }
};

// 不通过
const noPass = async () => {
    try {
        const data = {};

        if (teacherReview.value == 0) {
            showToast('审批操作失败，不通过时需填写理由');
            return;
        }

        data.comment = teacherReview.value;

        const roleNum = teacherStore.roleNums;
        const state = leaveDetail.value.state;

        if (roleNum.includes(13) && state == 17) {
            data.state = 21;
        } else if (
            state == 5 ||
            state == 0 ||
            (state == 11 && roleNum.includes(6))
        ) {
            data.state = 15;
        } else if (roleNum.includes(19)) {
            data.state = 27;
        } else if (roleNum.includes(3)) {
            data.state = 10;
        }

        data.id = route.query.id;

        const result = await reqPassLeaveNote(data);

        if (result.status == 200) {
            showNotify({
                message:
                    '您已审核通过该条信息，审核结果会尽快发送回审核人, 5秒钟之后跳转到主页',
                type: 'success',
                duration: 5000
            });
        } else {
            throw new Error(
                result.statusText || '发送失败, 5秒钟之后跳转到主页'
            );
        }

        const timer = setTimeout(() => {
            router.push({ name: 'home-teacher' });
            clearTimeout(timer);
        }, 5000);
    } catch (e) {
        showFailToast(e.message);
    }
};

const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
</script>

<template>
    <div class="container" v-loading="loading">
        <h2 class="heading">{{ leaveDetail.studentName }}的请假条</h2>
        <img
            class="pass-img"
            v-if="isShowPassImg"
            :src="`${PUBLIC_URL}/${leaveDetail.departmentName}pass.png`"
            alt="图片"
        />
        <el-descriptions :column="1" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审核状态"
            >
                {{ stateNumber(leaveDetail.state) }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="姓名"
            >
                {{ leaveDetail.studentName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="学号"
            >
                {{ leaveDetail.studentNumber }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="发起时间"
            >
                {{ leaveDetail.createTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="班级/工作室"
            >
                {{ leaveDetail.className }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="家长电话"
            >
                {{ leaveDetail.parentPhone }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假类型"
            >
                {{ leaveType }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content reason"
                label="请假理由" 
                width="400"
            >
                {{ leaveDetail.reason }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="图片证明"
                v-if="imgList.length"
            >
                <ul class="picture-wrapper">
                    <li class="picture" v-for="img in imgList">
                        <el-image
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="imgList"
                            :initial-index="4"
                            :src="img"
                            fit="cover"
                            class="image"
                        />
                    </li>
                </ul>
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假开始时间"
            >
                {{ leaveDetail.startTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假结束时间"
            >
                {{ leaveDetail.endTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="是否离深圳"
                v-if="leaveDetail.leaveSz"
            >
                {{ leaveDetail.leaveSz == 1 ? '是' : '否' }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="去往目的地"
                v-if="leaveDetail.leavePlace"
            >
                {{ leaveDetail.leavePlace }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="家长意见"
                v-if="review1"
            >
                {{ review1 }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审批人"
                v-if="review2"
            >
                {{ review2 }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="第二审批人"
                v-if="review3"
            >
                {{ review3 }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="最终审批人"
                v-if="review4"
            >
                {{ review4 }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="本次学期请假次数"
                v-if="leaveDetail.leaveCount"
            >
                {{ leaveDetail.leaveCount }}
            </el-descriptions-item>
        </el-descriptions>
        <div class="form" v-if="isShowForm">
            <div class="form__input-wrapper">
                <label class="input-label">审批回复</label>
                <el-input
                    size="large"
                    placeholder="请填写审批回复"
                    v-model.trim="teacherReview"
                ></el-input>
            </div>
            <div class="form__button-wrapper">
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="pass"
                >
                    通过
                </el-button>
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="noPass"
                >
                    不通过
                </el-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    padding: 20rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 22rem;
    text-align: center;
    margin-bottom: 20rem;
    font-weight: bold;
}

:deep(.content) {
    font-size: 18rem !important;
}

:deep(.reason) {
    display: block !important;
    width: 320rem;
    word-wrap: break-word;
    white-space: normal;
}

.form {
    &__input-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 20rem;
    }

    &__button-wrapper {
        width: 100%;
        text-align: center;

        .button {
            font-size: 18rem;
        }
    }

    .input-label {
        width: 120rem;
        font-size: 18rem;
    }
}

.pass-img {
    position: absolute;
    width: 140rem;
    right: 30rem;
    top: 100rem;
}

.picture-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.picture {
    width: 100rem;
    height: 100rem;
    margin: 5rem;

    .image {
        width: 100%;
        height: 100%;
        background-color: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rem;
    }
}
</style>
